<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" session="false" %>
<%@ include file="/WEB-INF/jspf/import.jspf" %>
<!doctype HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
        <title> 车友会-同城车友会 </title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="lijun_gz none" />
        <link rel="stylesheet" type="text/css" href="http://js.3conline.com/wap/pcauto/2014/touch/cyh.css">
    </head>

    <body class="g-doc" style="background: #f5f5f5">
        <!--栏目计数器/文章计数器-->
        <jsp:include page="/template/wap/common/counter.jspf">
            <jsp:param name="channel" value="7474" />
        </jsp:include>
        <div class="body">
            <%@include file="../common/intf6007.html" %>
            <!-- 公共头部 -->
            <div class="g-hd">
                <a href="http://m.pcauto.com.cn" class="header-home" title="太平洋汽车网"></a>
                <div class="header-title">
                    <span class="header-title-nav">
                        <a href="${WAPROOT}/">车友会</a> > <a href="${WAPROOT}/tongcheng/">同城</a> > 同城车友会
                    </span>
                </div>
                <span class="select-fake" id="JCity">
                    <select class="select-org"></select>
                </span>
            </div>
            <div id="clubList" class="m-cylist">
            </div>
            <div class="btn-more" style="display:none;" id="showMore"><a id="J-more" onclick="getCityClubList.loadMore();">点击查看更多</a></div>
            <script type="text/javascript">
                /*满屏功能*/
                function setHeight(){//每次数据加载后运行一次该函数
                    var Jfoot = document.querySelector(".g-footer");
                    var Jbody = document.querySelector(".body");
                    if (!Jfoot) return;
                    if (!Jbody) return;
                    var webHeight = document.documentElement.clientHeight,
                    JbodyHeight = Jbody.clientHeight;
                    if (JbodyHeight < webHeight) {
                        Jbody.style.height = webHeight + "px";
                        Jbody.style.position = "relative";
                        Jfoot.setAttribute("style", "width:100%;position:absolute;bottom:0px;");
                    }else{
                        Jfoot.style.position = "relative";
                    }
                }
//                window.onload = function(){
//                    setHeight();
//                }
            </script>
            <div class="g-footer">
                <!-- 公共底部 -->
                <%@include file="../common/intf5987.html" %>
            </div>
        </div>
        <script type="text/javascript">
            function getScript(url, callback, charset) {
                var scr = document.createElement('script');
                if (charset) scr.setAttribute('charset', charset);
                scr.onload = scr.onreadystatechange = function() {
                    if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
                        scr.onload = scr.onreadystatechange = null;
                        callback && callback();
                        scr.parentNode.removeChild(scr);
                    }
                };
                scr.src = url;
                document.body.insertBefore(scr, document.body.firstChild);
            } 
            function loadClubList(result) {
                if(result.code==0){
                    var clubDomTmpl = '<a class="m-cylist-item" href="{clubUrl}">'
                        +'<div class="m-cylist-pictext">'
                        +'<span class="{lockClass}">'
                        +'<img src="{logo}">'
                        +'</span>'
                        +'<div class="m-cylist-text">'
                        +'<p>{name}</p>'
                        +'<i class="star"><em style="width:{level}%"></em></i>'
                        +'<span><i>会员：{memberSum}人</i> <i>油值：{totalPetrol}L</i></span>'
                        +'<span><i>地区：{provinceName}</i> <i>车系：{seriesName}</i></span>'
                        +'</div>'
                        +'</div>'
                        +'</a>';
                    var html = "",
                    clubList = result.data;
                    Jlist = document.getElementById('clubList');
                    for(var i=0;i<clubList.length;i++){
                        var d = clubList[i];
                        var clubUrl = "${WAPROOT}/";
                        if(d.clubUrl){
                            clubUrl+=d.clubUrl;
                        }else{
                            clubUrl+=d.clubId;
                        }
                        var provinceName = d.provinceName.split('省')[0].split('市')[0]; 
                        var cityName = d.cityName.split('市')[0];
                        var lockClass =  "";
                        if(d.clubStatus==4){
                            lockClass =  "m-cylist-picspan";
                        }
                        html+=clubDomTmpl.replace(/{clubUrl}/ig,clubUrl).replace(/{logo}/ig,d.logo==""?"http://www1.pcauto.com.cn/wap/g20140509/cyh/img/holder_270x200.jpg":d.logo)
                        .replace(/{name}/ig,d.name).replace(/{level}/ig,d.level*20)
                        .replace(/{memberSum}/ig,d.memberSum).replace(/{totalPetrol}/ig,d.totalPetrol)
                        .replace(/{provinceName}/ig,((d.provinceName.indexOf("北京")>-1 || d.provinceName.indexOf("上海")>-1 ||d.provinceName.indexOf("天津")>-1 || d.provinceName.indexOf("重庆")>-1)?d.provinceName:(d.cityName=="")?d.provinceName:d.cityName))
                        .replace(/{seriesName}/ig,(d.seriesName ? d.seriesName : d.brandName ? d.brandName : '--')).replace(/{lockClass}/ig,lockClass);
                    }
                    if(getCityClubList.pageCount==0){
                        if(html.length==0){
                            html='<div class="m-none" id="nodata"><span>  &gt;_&lt; lll</span><p>抱歉，您所在的城市暂无车友会~</p></div>';
                        }
                        if(result.pageCount){
                            getCityClubList.pageCount=result.pageCount;
                        }
                        Jlist.innerHTML = html;
                    }else{
                        if(html){
                            Jlist.innerHTML += html;
                        }
                    }
                    if(getCityClubList.pageCount<=getCityClubList.pageNo){
                        document.getElementById('showMore').style.display="none";
                    }else{
                        document.getElementById('showMore').style.display="block";
                    }
                      setHeight();
                }
            };
            var getCityClubList = {
                cityId:"${cityId}",
                pageNo:1,
                pageSize:8,
                pageCount:0,
                init: function() {
                    var _this = this;
                    _this.changeCON(_this.cityId);
                    var JCitySelect = document.querySelector("#JCity select"),
                    cityData = _this.cityData;
                    for (var x in cityData) {
                        JCitySelect.add(new Option(x, cityData[x]));
                    }
                    JCitySelect.value=_this.cityId;
                    JCitySelect.addEventListener("change", function() {
                        var value = this.options[this.options.selectedIndex].value;
                        _this.cityId=value;
                        _this.pageNo=1;
                        _this.pageSize=8;
                        _this.pageCount=0;
                        _this.changeCON(value);
                    }, false);
                },
                provinceData :["110000","310000","500000","120000","350000","510000","410000"],
                cityData: {
                    "北京":"110000",
                    "上海":"310000",
                    "广州":"440100",
                    "深圳":"440300",
                    "福建":"350000",
                    "马鞍山":"340500",
                    "鞍山":"210300",
                    "保定":"130600",
                    "重庆":"500000",
                    "四川":"510000",
                    "长沙":"430100",
                    "长春":"220100",
                    "常州":"320400",
                    "沧州":"130900",
                    "郴州":"431000",
                    "东莞":"441900",
                    "大连":"210200",
                    "大庆":"230600",
                    "佛山":"440600",
                    "贵阳":"520100",
                    "赣州":"360700",
                    "哈尔滨":"230100",
                    "惠州":"441300",
                    "杭州":"330100",
                    "海口":"460100",
                    "合肥":"340100",
                    "邯郸":"130400",
                    "呼和浩特":"150100",
                    "济南":"370100",
                    "江门":"440700",
                    "金华":"330700",
                    "济宁":"370800",
                    "昆明":"530100",
                    "兰州":"620100",
                    "洛阳":"410300",
                    "柳州":"450200",
                    "临沂":"371300",
                    "廊坊":"131000",
                    "南京":"320100",
                    "南昌":"360100",
                    "南宁":"450100",
                    "宁波":"330200",
                    "南通":"320600",
                    "青岛":"370200",
                    "秦皇岛":"130300",
                    "沈阳":"210100",
                    "苏州":"320500",
                    "石家庄":"130100",
                    "绍兴":"330600",
                    "韶关":"440200",
                    "天津":"120000",
                    "太原":"140100",
                    "唐山":"130200",
                    "台州":"331000",
                    "泰州":"321200",
                    "武汉":"420100",
                    "乌鲁木齐":"650100",
                    "温州":"330300",
                    "潍坊":"370700",
                    "无锡":"320200",
                    "西安":"610100",
                    "徐州":"320300",
                    "西宁":"630100",
                    "邢台":"130500",
                    "银川":"640100",
                    "烟台":"370600",
                    "扬州":"321000",
                    "汕头":"440500",
                    "潮州":"445100",
                    "揭阳":"445200",
                    "中山":"442000",
                    "郑州":"410100",
                    "珠海":"440400",
                    "淄博":"370300",
                    "东营":"370500",
                    "长治":"140400",
                    "大同":"140200",
                    "湖州":"330500",
                    "龙岩":"350800",
                    "三明":"350400",
                    "漳州":"350600",
                    "宁德":"350900",
                    "莆田":"350300",
                    "南平":"350700",
                    "清远":"441800",
                    "梅州":"441400",
                    "肇庆":"441200",
                    "镇江":"321100",
                    "盐城":"320900",
                    "桂林":"450300",
                    "宜昌":"420500",
                    "包头":"150200",
                    "聊城":"371500",
                    "泰安":"370900",
                    "滨州":"371600",
                    "日照":"371100",
                    "德州":"371400",
                    "枣庄":"370400",
                    "菏泽":"371700",
                    "榆林":"610800",
                    "吉安":"360800",
                    "承德":"130800",
                    "衡水":"131100",
                    "张家口":"130700",
                    "运城":"140800",
                    "新乡":"410700",
                    "南阳":"411300",
                    "濮阳":"410900",
                    "湘潭":"430300",
                    "浙江":"330000",
                    "河南":"410000"
                },
                changeCON: function(cityId) {
                    this.loadList(cityId,this.pageNo);
                },
                loadMore:function(){
                    this.pageNo++;
                    this.loadList(this.cityId,this.pageNo);
                },
                loadList:function(cityId,pageNo){
                    var pageSize = this.pageSize;
                    var provinceId = 0;
                    var url = "${WAPROOT}/club/getClubByCityOrRegionId.do?req_enc=utf-8&resp_enc=utf-8&callback={callback}&cityId={cityId}&provinceId={provinceId}&pageNo={pageNo}&pageSize={pageSize}";
                    for(var i=0,len = this.provinceData.length;i<len; i++){
                        if(this.provinceData[i]==cityId){
                            provinceId=cityId;              
                            cityId=0;
                        }
                    }
                    url = url.replace(/{callback}/ig,"loadClubList").replace(/{cityId}/ig,cityId).replace(/{provinceId}/ig,provinceId).replace(/{pageNo}/ig,pageNo).replace(/{pageSize}/ig,pageSize)
                    getScript(url, null, 'utf-8');
                }
            }
            getCityClubList.init();
        </script>
    </body>
</html>